<template>
  <KView class="circle-content-view">
    <KView class="circle-content-view-content" :class="{'hidden-text':!requireAll}" v-if="isMiniprogram">
      <cus-view @ready="viewReady">
        <KView class="circle-content-view-tag" :style="{'background':circle.typeColor}">{{circle.typeTag}}</KView>
        <KView class="circle-content-view-theme">#{{circle.themeTag}}#</KView>
        <wx-text class="circle-content-view-text" space="nbsp">
          <span>{{circle.content}}</span>
        </wx-text>
      </cus-view>
    </KView>
    <KView v-if="isToggle&&!requireAll" class="circle-content-view-more">
      <span @click="lookMore">查看全文</span>
    </KView>
  </KView>
</template>

<script>
  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    props: {
      circle: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        cusViewComp: null,
        isToggle: false,
        requireAll: false,
        totalHeight:0
      };
    },

    methods: {
      viewReady({
        detail
      }) {
        let cusViewComp = detail.comp;
        this.cusViewComp = cusViewComp;

        cusViewComp.getCompRect(res => {
          let height = 130 * this.width / 750;
          let totalHeight = res.height;
          let isToggle = totalHeight > height;
          this.isToggle = isToggle;
          this.totalHeight = totalHeight;

          if (isToggle) {
            this.requireAll = false;
          } else {
            this.requireAll = true;
          }
        });
      },

      lookMore() {
        this.requireAll = true;
      }
    }
  };

</script>

<style lang="scss">
  .circle-content-view {
    .circle-content-view-content {
      &.hidden-text {
        display: box;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-height: formatPx(130);
        overflow: hidden;
      }

      .circle-content-view-tag {
        display: inline-block;
        height: formatPx(34);
        line-height: formatPx(34);
        width: formatPx(76);
        text-align: center;
        margin-right: formatPx(14);
        font-size: formatPx(24);
        border-radius: 6px;
        color: #ffffff;
      }

      .circle-content-view-theme {
        display: inline-block;
        height: formatPx(42);
        line-height: formatPx(42);
        font-size: formatPx(26);
        color: #5cc265;
      }

      .circle-content-view-text {
        font-size: formatPx(26);
        line-height: formatPx(42);
      }
    }

    .circle-content-view-more {
      text-align: right;
      font-size: formatPx(26);
      color: #5AC164;
      text-decoration: underline;
    }
  }

</style>
